<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>系统注册</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">    
    <link rel="stylesheet" href="/static/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <link rel="stylesheet" href="/static/js/lay-module/step-lay/step.css" media="all">
   
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-body" style="padding-top: 40px;">
                    <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 0 auto;">
                        <div carousel-item>
                            <div >
                                <form class="layui-form layuimini-form" id="registerForm" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">手机号:</label>
                                        <div class="layui-input-block">
                                            <input type="tel" name="mobile"  lay-verify="required|phone" placeholder="请输入手机号"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">密码:</label>
                                        <div class="layui-input-block">
                                            <input type="tel" name="password" lay-verify="required" placeholder="请输入密码"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">出生日期:</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="birthday" id="date1" lay-verify="date" placeholder="yyyy-MM-dd" id="birthData" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label required">邮箱:</label>
                                        <div class="layui-input-block">
                                            <input type="email" name="email" lay-verify="email" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">头像(点击上传→)</label>
                                        <div class="layui-upload-list layui-input-block layui-upload"  >
                                            <img class="layui-upload-img" id="logo"  style="width: 100px;height: 100px;" src="/static/images/logo.png">
                                            <input name="icon" id="icon" style="display: none;" value="/static/images/logo.png">
                                            <span id="logoText"></span>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button class="layui-btn" lay-submit lay-filter="formStep">
                                                &emsp;下一步&emsp;
                                            </button>
                                        </div>
                                    </div>    
                                
                                </form>
                            </div>
                            <div >
                                <form class="layui-form" style="margin: 0 auto;max-width: 460px;padding-top: 40px;">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">手机号:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux" id="mobile"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">出生日期:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux">
                                                <span style="font-size: 18px;color: #333;" id="birthday"></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">邮箱:</label>
                                        <div class="layui-input-block">
                                            <div class="layui-form-mid layui-word-aux" id="email"></div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">头像(点击上传→)</label>
                                        <div class="layui-upload-list layui-upload">
                                            <img class="layui-upload-img" id="logo2" src="/static/images/logo.png"
                                                 style="width: 100px;height: 100px;">
                                            <span id="logoText"></span>
                                        </div>
                                    </div>
                                   
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-primary pre">上一步</button>
                                            <button class="layui-btn" lay-submit lay-filter="formStep2">
                                                &emsp;确认注册&emsp;
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div>
                                <div style="text-align: center;margin-top: 90px;">
                                    <i class="layui-icon layui-circle"
                                       style="color: white;font-size:30px;font-weight:bold;background: #52C41A;padding: 20px;line-height: 80px;">&#xe605;</i>
                                    <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                                        注册成功
                                    </div>
                                    <div style="font-size: 14px;color: #666;margin-top: 20px;">欢迎使用本系统</div>
                                </div>
                                <div style="text-align: center;margin-top: 50px;">
                                    <button class="layui-btn next login">去登陆</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>
                   
                </div>
            </div>
        </div>

    </div>
</div>
<script src="/static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/js/jquery-ajax-cache.js" charset="utf-8"></script>
<script src="/static/api/api.js" charset="utf-8"></script>

<script>
    layui.use([ 'form', 'step' , 'laydate', 'upload'], function () {
        var $ = layui.$,
            form = layui.form,
            step = layui.step;
            laydate = layui.laydate; 
            upload = layui.upload;
        
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '575px',
            stepItems: [{
                title: '填写注册信息'
            }, {
                title: '确认注册信息'
            }, {
                title: '完成'
            }]
        });


        form.on('submit(formStep)', function (data) {
            var mobile = $( "input[name='mobile']").val();
            var birthday = $( "input[name='birthday']").val();
            var email = $( "input[name='email']").val();
        

            $("#mobile").text(mobile);
            $("#birthday").text(birthday);
            $("#email").text(email);
            step.next('#stepForm');
            return false;
        });

        form.on('submit(formStep2)', function (param) {
            $.ajax({
                url: register,
                type: "post",
                data: $('#registerForm').serializeArray(),
                dataType: "json",
                success: function (rst) {
                    layer.msg(rst.msg)
                    if (rst.code == "200") {
                        step.next('#stepForm');
                    }
                }
            });
            return false;
        });

        $('.pre').click(function () {
            step.pre('#stepForm');
        });

        $('.next').click(function () {
            step.next('#stepForm');
        });

        $(".login").click(function() {
            location.href="/entry/login.html";
        });

         //普通图片上传
        var uploadInst = upload.render({
            elem: '#logo'
            , url: dev+'/api/entry/file/upload'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#logo').attr('src', result); //图片链接（base64）
                    $('#logo2').attr('src', result);
                });
            }
            , done: function (rst) {
                //如果上传失败
                if (rst.code > 0) {
                    var urls = rst.data;
                    $("input[name='icon']").val(urls[0]);
                } else {
                    return layer.msg('上传失败');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var logoText = $('#logoText');
                logoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                logoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
        
    })
</script>
</body>
</html>